<template>
  <div class="Collection" ref="container">
    <mu-load-more @refresh="refresh" :refreshing="refreshing" :loading="loading" @load="load">
    <div class="bgImg">
      <img src="@as/img/wode_sc.png" alt>
    </div>
      <div>
        <h3 class="title">我的收藏</h3>
        <ul>
          <li v-for="(item, index) in collectionList" :key="index" :class="item.resources_type == 4||(!item.low_source&&!item.photo)?'noCover':'withCover'" @click="goCollection(item)">
            <div class="cover" v-if="item.low_source||item.photo">
              <img v-if="item.resources_type !== 4" :src="item.low_source||item.photo" alt="">
            </div>
            <div class="content">
              <p>{{item.title}}</p>
              <div>
                <div class="tip">
                  <img src="@as/img/zuzhi (13).png">
                  <span>{{item.resources_type|resourcesType}}</span>
                </div>
                <div class="date">{{item.create_time|time}}</div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    <div class="qs" v-if="notMore">
      <img src="@as/img/quesheng_zanwushoucang@2x.png" alt="">
      <span>暂无收藏</span>
    </div>
    </mu-load-more>
    <div class="loading" v-if="loadOver" :class="{'notPageOne':p>1||collectionList.length<6}">{{loaded}}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      refreshing: false,
      loading: false,
      loadOver:false,
      p: 1,
      page: 6,
      collectionList: [],
      notMore:false,
      loaded:'加载更多'
    }
  },
  created() {
    this.getCollectionList(1)
    this.$progress.done()
  },
  mounted() {
  },
  methods: {
    async getCollectionList(p){
      try {
        let params = {
          p: this.p,
          page: this.page,
          uid: JSON.parse(Cookies.get('user_71ydj')).id
        }
        const url = `app/My/collection_list`
        let res = await this.$http.get(url, params)
        this.loading = false;
        if(res.code === 200){
            if(res.data.length){
                this.collectionList.push(...res.data);
            }
        }
          this.loadOver =false;
          if(p!=1){
              console.log(res.data);
              if(res.data.length){
              }else{
                  this.loadOver =true;
                  this.loading =false;
                  this.loaded='没有更多数据了'
                  return false
              }
          }else {
              if(!res.data.length){
                  this.notMore =true;
                  this.loadOver =true;

              }else{
                  if(res.data.length<5&&res.data.length!=0){

                      this.loadOver =true;
                      this.loaded='没有更多数据了';
                      this.notMore =false;
                  }
              }
          }


      } catch (e) {
        console.log('error:', e)
      }
    },
    refresh() {
      this.refreshing = true
      this.$refs.container.scrollTop = 0
      this.p = 1
      this.getCollectionList()
    },
    load() {
        if (!this.loadOver) {
            this.loading = true;
            clearTimeout(this.method);
            this.method = setTimeout(() => {
                this.p = this.p + 1;
                this.getCollectionList(this.p)
                this.loading =false;
            }, 2000);
        }
      // this.loading = true;
      // this.p++
    },
    goCollection(v){
      console.log(v.resources_type)
      if(v.resources_type==1){
        // return '新闻'
        this.$router.push({ path: '/propaganda/details/newsDetails', query: {id: v.resources_id, type: v.type} })
      }
      if(v.resources_type==2){
        // return '相册'
        this.$router.push({ path: '/propaganda/details/albumDetails', query: {id: v.resources_id} })
      }
      if(v.resources_type==3){
        // return '微视'
        this.$router.push({ path: '/propaganda/videoList/videoList', query: {id: v.resources_id,class_id: v.class_id} })
      }
      if(v.resources_type==4){
        // return '通知公告'
        this.$router.push({ path: '/organization/notice_details' , query: {id: v.resources_id} })
      }
    },
  },
  components: {

  }
}
</script>

<style lang="scss">
.Collection{
  position: relative;
  height: 100vh;
  .bgImg{
    position: absolute;
    top: 0;
    right: -19px;
    width: 146px;
    height: 141px;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .title{
    font-size:28px;
    font-family:PingFang-SC-Bold;
    font-weight:bold;
    color:rgba(51,51,51,1);
    padding: 34px 0;
    padding-left: 13px;
    margin: 0;
  }
  ul{
    width: 100%;
    box-sizing: border-box;
    padding: 0 16px;
    li{
      display: flex;
      position: relative;
      width:343px;
      height:94px;
      background:rgba(255,255,255,1);
      box-shadow:0px 4px 10px 0px rgba(0, 0, 0, 0.08);
      border-radius:4px;
      margin-bottom: 15px;
      box-sizing: border-box;
      padding: 22px 20px;
      &::before{
        content: '';
        position: absolute;
        left: 0;
        top: 20px;
        width:4px;
        height:26px;
        background:rgba(244,117,72,1);
        border-radius:0px 2px 2px 0px;
      }
      .content{
        flex:1;
        height: 100%;
        width: 100%;
        div{
          display: flex;
          justify-content: space-between;
          .tip{
            display: flex;
            align-items: center;
            img{
              width: 15px;
              height: 15px;
              margin-right: 5px;
            }
            span{
              font-size:12px;
              font-family:PingFang-SC-Medium;
              font-weight:500;
              color:rgba(204,204,204,1);
            }
          }
          .date{
            font-size:12px;
            font-family:PingFang-SC-Medium;
            font-weight:500;
            color:rgba(153,153,153,1);
          }
        }
      }
    }
    li.noCover{
      .content{
        p{
          margin: 0;
          font-size:14px;
          font-family:PingFang-SC-Medium;
          font-weight:500;
          color:rgba(51,51,51,1);
          margin-bottom: 18px;
          overflow: hidden;/*超出部分隐藏*/
          text-overflow:ellipsis;/* 超出部分显示省略号 */
          white-space: nowrap;/*规定段落中的文本不进行换行 */
        }
      }
    }
    li.withCover{
      height: 115px;
      .cover{
        width:73px;
        height:62px;
        border-radius:4px;
        box-shadow:0px 0px 5px 0px rgba(80,80,80,0.18);
        margin-right: 15px;
        overflow: hidden;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .content{
        p{
          margin: 0;
          font-size:14px;
          font-family:PingFang-SC-Medium;
          font-weight:500;
          line-height:24px;
          margin-bottom: 5px;
          text-overflow: -o-ellipsis-lastline;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
          height: 48px;
        }
      }
    }
  }
  .qs{
    z-index: 99999;
    height: calc(100vh - 150px);
    width: 100vw;
    position: relative;
    top: 0;
    left: 0;
    background-color: #fff;
    text-align: center;
    /*padding-top: 100px;*/
    img{
      width:100%;
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      margin: auto;
    }
    span{
      position: absolute;
      top: 300px;
      left: 50%;
      transform: translate(-50%);
      font-size:14px;
      font-family:PingFang-SC-Medium;
      font-weight:500;
      color:rgba(153,153,153,1);
    }
  }
  .loading {
    width: 343px;
    margin: 0 16px ;
    font-size: 14px;
    color: #dddddd;
    clear: both;
    line-height: 61px;
    text-align: center;
    &.notPageOne{
      margin-top: -50px;
    }
  }
  .mu-load-more /deep/ .mu-circle-spinner{
    border-color: #e5e5e5;
  }
}
</style>
